<script lang="ts">
import {reactive, shallowReactive} from "vue";

export default {
  setup() {
    /*深层的响应式它会影响到所有嵌套的属性*/
    const person = reactive({
      name: "陶品奇",
      age: 18,
      children: {
        son: '马云',
      }
    })

    /*浅层的响应式只有根级别的属性是响应式的*/
    const student = shallowReactive({
      name: "陶品奇",
      age: 18,
      children: {
        son: '马云',
      }
    })

    const changePerson = () => {
      person.name = "马化腾"
      person.children.son = "许家印"
    }

    const changeStudent = () => {
      // 修改深层不生效
      student.children.son = "王健林"
    }

    return {
      person,
      changePerson,
      student,
      changeStudent
    }
  },
}
</script>

<template>
  <h1>person对象{{ person }}</h1>
  <button @click="changePerson">修改person对象</button>
  <h1>student对象{{ student }}</h1>
  <button @click="changeStudent">修改student对象</button>
</template>

